import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import GoodsItem from '../components/GoodsItem.vue';
import Buyer from '../components/Buyer.vue';
import { h } from 'vue';
import { Input, InputGroup, Select, Tag } from 'ant-design-vue';
import { PayTypeEnum, PayTypeColorEnum, } from '/@/common/enum/order';
import { RefundStatusEnum, RefundTypeEnum } from '/@/common/enum/order/refund';


// table表格 数据
export const columns: BasicColumn[] = [

  {
    title: '订单ID',
    dataIndex: 'order_no',
    width: 100,
  },
  {
    title: '商品信息',
    dataIndex: 'goods',
    slots: { title: 'customGoods', customRender: 'goods' },
    width: 100,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return record.goods.map(goods => h(GoodsItem, {
        goods
      }))
    },
  },
  {
    title: '实付款',
    dataIndex: 'total_price',
    width: 100,
    align: 'left',
    slots: { title: 'customPrice', customRender: 'price' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h('div', {
        style: {
          whiteSpace: 'pre-line'
        }
      }, `￥${record.total_price}\n(含运费：￥${record.express_price})`)
    },
  },
  {
    title: '买家',
    dataIndex: 'user',
    width: 100,
    align: 'left',
    slots: { title: 'customUser', customRender: 'user' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Buyer, {
        buyer: record.user
      });
    },
  },
  {
    title: '售后类型',
    dataIndex: 'type',
    width: 100,
    slots: { title: 'customType', customRender: 'Type' },
    customRender: ({ record }) => {
      return h(Tag, {
        color: PayTypeColorEnum[record.pay_type].name,
      }, () => PayTypeEnum[record.pay_type].name);
    },
  },
  {
    title: '处理进度',
    dataIndex: 'progress',
    width: 150,
    align: 'left',
    slots: { title: 'customProgress', customRender: 'progress' },

  },
  {
    title: '售后单状态',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 100,
  },
];



// 表格搜索类型
const allType = { value: -1, label: "全部" }
// 通过枚举获取选择框的值
const getTypeByEnum = (data) => data.data.map(v => {
  return {
    label: v.name,
    ...v
  }
})

export const SearchType = [
  { label: '订单号', value: 10 },
  { label: '会员昵称', value: 20 },
  { label: '会员ID', value: 30 },
]

// 表格搜索框
export const searchFormSchema: FormSchema[] = [
  {
    field: 'searchType',
    label: '搜索类型',
    component: 'Input',
    labelWidth: 80,
    colProps: { span: 3 },
    defaultValue: 10,
    ifShow: false,
    slot: "search"
  },
  {
    field: 'searchValue',
    label: '关键字',
    component: 'Input',
    labelWidth: 70,
    colProps: { span: 7 },
    render: ({ model, field }) => {
      return h(InputGroup, {
        compact: true,
        value: '',
        style: 'display:flex;flex-direction: row;'
      }, () => [
        // select组件
        h(Select, {
          style: 'width:150px;',
          value: model['searchType'],
          options: SearchType,
          onChange: (e: ChangeEvent) => {
            model['searchType'] = e;
          },
        }),
        // input组件
        h(Input, {
          value: model[field],
          placeholder: "请输入关键字",
          onChange: (e: ChangeEvent) => {
            model[field] = e.target.value;
          },
        })]);
    },
  },
  {
    field: 'refundType',
    label: '售后类型',
    component: 'Select',
    defaultValue: -1,
    componentProps: () => {
      return { options: [allType, ...getTypeByEnum(RefundTypeEnum)] }
    },
    labelWidth: 100,
    colProps: { span: 5 },
  },
  {
    field: 'refundStatus',
    label: '售后状态',
    component: 'Select',
    defaultValue: -1,
    componentProps: {
      options: [allType, ...getTypeByEnum(RefundStatusEnum)],
    },
    labelWidth: 100,
    colProps: { span: 5 },
  },
  {
    field: 'betweenTime',
    label: '下单时间',
    component: 'RangePicker',
    componentProps: {
      dateFormatList: ['DD-MM-YYYY', 'DD-MM-YY'],
      valueFormat: 'DD-MM-YYYY'
    },
    labelWidth: 70,
    colProps: { span: 6 }
  },

];



